<template>
	
	<view class="login">
		<uni-popup ref="popup" type="message">
		    <uni-popup-message :type="msgType" :message="msgMsg" :duration="2000"></uni-popup-message>
		</uni-popup>
		<view class="login_form">
		        <uni-forms :modelValue="formData" ref="form" :rules="formRules">
		            <uni-forms-item name="username" >
		               <input type="text" placeholder="请输入用户名" v-model="formData.username" @input="binddata('username',$event.detail.value)"/>
		            </uni-forms-item>
		            <uni-forms-item  name="password"> 
						<input type="text" placeholder="请输入密码" v-model="formData.password" @input="binddata('password',$event.detail.value)" />
		            </uni-forms-item> 
					<uni-forms-item  name="email">
						<input type="text" placeholder="请输入您的邮箱" v-model="formData.email" @input="binddata('email',$event.detail.value)" />
						<view class="sendCaptcha"  :style="buttonstyle" @click="sendCaptcha">
							{{sendTitle}}
						</view>
<!-- 						<button type="default" @click="sendCaptcha" plain=true size="mini">点击发送验证码</button>
 -->						
					</uni-forms-item> 
					<uni-forms-item name='captcha'>
						<u-transition :show="showCaptcha" mode="slide-left">
						<input type="text" placeholder="请输入您的验证码" v-model="formData.captcha" @input="binddata('captcha',$event.detail.value)" />
						    </u-transition>
					</uni-forms-item>
		        </uni-forms>
				<button @click="submitForm" id="mybutton">
				<uni-icons type="arrow-right" size="30" color="#ffffff" style="position: relative; bottom: 6upx;"></uni-icons>
				<!-- <image src="../../static/login_iconleft.png" mode="aspectFit"></image> -->
				</button>      
		 </view>

		 <view class="login_footer">
			轻提醒 version 1.0
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msgType:'success',
				msgMsg:"登陆成功",
				showCaptcha:false,
				sendTitle:"发送验证码",
				buttonstyle:{color:"#4F4F4F"},
				formData:{
					username:"",
					password:"",
					email:"",
					captcha:""
				},
				 formRules: {
				                // 对name字段进行必填验证
				                username: {
				                    rules: [{
				                            required: true,
				                            errorMessage: '请输入姓名',
				                        },
				                        {
				                            minLength: 3,
				                            maxLength: 10,
				                            errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
				                        }
				                    ]
				                },
				                // 对email字段进行必填验证
				                password: {
				                    rules: [{
										required:true,
				                        errorMessage: '请输入密码',
				                    }]
				                },
								email: {
								    rules: [{
										required:true,
				                        errorMessage: '请输入邮箱',
				                    },
									{
								        format: 'email',
								        errorMessage: '请输入正确的邮箱地址',
								                    }]
								                }
				            }
			}
		},
		methods: {
			openMsg(type,msg){
				this.msgType = type
				this.msgMsg = msg
				this.$refs.popup.open()
			},
			sendCaptcha(){
				this.$refs.form.validate().then(res=>{
					this.Myrequest('checkCaptcha/',"GET",{"email":res.email,"username":res.username}).then(data=>{
						if (data.code == 201){
							uni.showToast({
								icon:"none",
								title:data.msg
							})
							var i = 60
							var timer = setInterval(()=>{
								if(i <1){
									this.sendTitle="发送验证码"
									console.log(this.sendTitle)
									this.buttonstyle = {color:"#4f4f4f"}
									clearInterval(timer)
									
								}
								else{
										this.sendTitle= "已发送"+"（"+String(i-=1)+"s）";
										
										this.buttonstyle={color:"#000000"}
										
								}
								},1000)
							this.showCaptcha = true
						}
						else if (data.code == 400){
							this.openMsg('error','用户名已存在')
								return
						}
						
					})
				})
			},
			submitForm(){
			this.$refs.form.validate().then(res=>{
			                console.log('表单成功信息', res);
							console.log(getApp().globalData.userdata,'这是userdata')
							
							
							this.Myrequest('registercheck/',"POST",{"username":res.username,"password":res.password,"email":res.email,"captcha":res.captcha}).then(
								async backData=>{
									console.log(backData)
								if(backData.code === 400){
								this.openMsg('error',backData.msg)
									return
								}
								if(backData.code === 200){
									console.log(backData.data)
									uni.setStorage({
										key:"userdata",
										data:backData
									})
									// uni.setStorage(-{
									// 	key:'csrftoken',
									// 	data:csrftoken
									// })
									// let data = await uni.getStorage({
									// 	key:'jwt',
									// 	// success(jwt){
									// 	// 	console.log(jwt.data)
									// 	// }
									// })
									uni.showToast({
										title: '注册成功',
										icon:'success',
										duration:3000
									});
								uni.redirectTo({
									url:"/pages/login/login",
									success(res) {
										
										console.log(res)
									},
									fail(res) {console.log(res)
										uni.showToast({
											title:"请求失败,请检查网络",
											icon:"none",
										})
										console.log("跳转失败")
									},
							})}
							})
							
			            }).catch(err =>{
			                console.log('表单错误信息：', err);
			            })
		}
		}
	}
</script>

<style scss scoped>
	.login {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-content: center;
		position: relative;	
	}
	.login_form {
		position: absolute;
		top: 158upx;
	}
	input {
		width: 522upx;
		height: 100upx;
		border-radius: 100upx;
		padding-left: 40upx;
		font-size: 30upx;
		background-color: #f2f3f7;	
	}
	button {
		margin-top: 100upx;
		width: 150upx;
		height: 150upx;
		border-radius: 200upx;
		background-image: linear-gradient(#22b1fd,#00cafc);
		text-align: center;
	}
	
	image {
		width: 100%;
		height: 100%;
		color: #FFFFFF;
		
	}
	#scrollContainer{
		position: relative;
		pointer-events:none;
	}
	.sendCaptcha{
		float: right;
		position: absolute;
		line-height: 100upx;
		text-align: center;
		color: #4F4F4F;
		right: 30upx;
		top: 0;
		height: 100upx;
		pointer-events: auto
	}
	
	.t-icon{
		color: #FFFFFF;
	}
	.t-icon-youjiantou {
		z-index: 999;
		font-size: 60upx;
		position: relative;
		left: -15upx;
		top:42upx;
		

	}
		
	.login_footer {
		
		position: absolute;
		bottom: 80upx;
		font-size: 30upx;
		
		}
		span {
			margin: 0 32upx;
			display: inline-block;
		}
</style>
